<template>
	<view class="">
		<view v-if="addressList">
			<view 
				class="margin-sm u-border padding" 
				v-for="(item,index) in addressList"
				:key="index"
				:class="{'default':item.isdefault}"
			>
				<view class="default-cont">
					默
				</view>
				<view class="flex justify-between">
					<view class="flex align-center" @tap="docheck(index)">
						<text
							class="iconfont icon-gouxuan margin-right"
							:class="checkedIdx==index?'color-yellow':''"
							
						></text>
						<view class="">
							{{item.username}},{{item.phone}}
							<view class="">
								{{item.city}}
								{{item.region}}
								{{item.detail}}
							</view>
						</view>
					</view>
					<view @click="doadd(index)" class="edit margin-bottom-xs">
						<text class="iconfont icon-bianji"></text>
					</view>
				</view>
				<view class="flex justify-around align-center margin-top">
					<view class="" v-if="item.isdefault">
						默认地址
					</view>
					<view class="" v-else @click="handleDefault(index)">
						设为默认
					</view>
					
					<u-line length="15" direction="col"></u-line>
					<view class="">
						删除地址
					</view>
				</view>
			</view>
		</view>
		<view class="text-center">
			<button class="cu-btn bg-brown" @click="doadd">
				新增地址
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ynorder:false
			}
		},
		computed: {
			// 获取地址列表
			addressList() {
				return this.$store.state.addr.addrlist;
			},
			// 指定地址下标
			checkedIdx(){
				return this.$store.state.addr.checkedIdx;
			}
		},
		onLoad(e) {
			// 来源识别，1为订单过来的，需要返回。其它的再看
			if (e.t==1) {
				this.ynorder = true;
			};
			// 如果状态机没数据，则请求数据源拿数据
			if (!this.addressList) {
				this.$store.dispatch("getact");
			}
		},
		methods: {
			// 有下标为修改，否则新增
			doadd(idx=-1){
				let gourl = idx>=0?"addrnew?idx="+idx:"addrnew";
				uni.navigateTo({
					url:gourl
				})
			},
			// 通过vuex数据改变驱动页面，如果来自订单页，直接返回订单
			docheck(idx){
				this.$store.commit("docheck",idx);
				if (this.ynorder) {
					uni.navigateBack({
						delta:1
					})
				}
			},
			// 通过vuex设置默认地址，会驱动页面变化
			handleDefault(idx){
				this.$store.commit("dodefault",idx)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
	.default-cont{
		display: none;
	}
	.default{
		position: relative;
		overflow: hidden;
		.default-cont{
			padding: 40upx 10upx 10upx;
			width: 150upx;
			background-color: #FAE456;
			font-size: 12upx;
			text-align: center;
			position: absolute;
			top: -30upx;
			right: -65upx;
			transform: rotate(45deg);
			display: block;
		}
	}
</style>
